<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS实现简单的幻灯片效果</title>
    <style type="text/css">
       .content {
       	width: 300px;
       	height: 300px;
       	margin: 50px auto;
       	display: inline-block;
       	overflow: hidden;
       }
       img{
       	float: left;
       	width: 300px;
       	height: 300px;
       	animation: slide 6s infinite;
       }
       @-webkit-keyframes slide {
       	0%{
			transform: translateX(0px);
		}
		25%{
			transform: translateX(-350px);
		}
		50%{
			transform: translateX(-650px);
		}
		75%{
			transform: translateX(0px);
		}
		100%{
			transform: translateX(-350px);
		}

       }
    </style>
</head>
<body>
    <div class="content">
		<img src="http://www.gdzp.org/uploadfile/2014/0905/20140905052820850.jpg">
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2232705892,1640432019&fm=173&app=25&f=JPEG?w=640&h=426&s=14B67432090162CE4CFC80F702000023">
	    <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2125630450,2846701477&fm=173&app=25&f=JPEG?w=640&h=588&s=52907088C0CE2FED36148092030050A1">
    </div>
    <!--兼容性： IE8以及IE8以下的浏览器不兼容，只显示文字，不显示图片-->


    <!--以上代码实现使用到的技术：
        除了设置相应的CSS样式，有两点值得注意：
            1.设置按钮的位置(绝对定位) ，left:-9999px用来隐藏按钮；
            2.<label>标签中的for属性与input标签中的id关联，然后根据input的checked的状态显示或隐藏图片，来达到显示幻灯片效果的目的。
    -->
</body>
</html>